import 'dart:io';

import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import '../../../app_files.dart';
import 'action.dart';
import 'state.dart';

const double kOrderImageWidth = 90;

Widget buildView(
    RefuseIndoorState state, Dispatch dispatch, ViewService viewService) {
  Widget _infoWidget() => Container(
        padding: EdgeInsets.only(left: 15, right: 15, bottom: 8),
        decoration: BoxDecoration(
            color: Colors.white,
            border: Border(
                bottom: BorderSide(color: ThemeConfig.separeColor, width: 10))),
        child: Column(
          children: [
            Container(
              height: 44,
              child: Align(
                alignment: Alignment.centerLeft,
                child: Text(
                  '客户信息',
                  style: TextThemeConfig.Font16WithColorBold22,
                ),
              ),
              margin: EdgeInsets.only(bottom: 4),
            ),
            Container(
              padding: EdgeInsets.symmetric(vertical: 5),
              child: Row(
                children: [
                  Text(
                    '客户姓名',
                    style: TextThemeConfig.Font14WithColor66,
                  ),
                  Padding(padding: EdgeInsets.only(left: 50)),
                  Text(
                    state.model.userName,
                    style: TextThemeConfig.Font14WithColor22,
                  ),
                ],
              ),
            ),
            Container(
              padding: EdgeInsets.symmetric(vertical: 5),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '客户地址',
                    style: TextThemeConfig.Font14WithColor66,
                  ),
                  Padding(padding: EdgeInsets.only(left: 50)),
                  Expanded(
                    child: Text(
                      state.model.userAddress,
                      style: TextThemeConfig.Font14WithColor22,
                    ),
                  ),
                ],
              ),
            ),
            Container(
              padding: EdgeInsets.symmetric(vertical: 5),
              child: Row(
                children: [
                  Text(
                    '联系方式',
                    style: TextThemeConfig.Font14WithColor66,
                  ),
                  Padding(padding: EdgeInsets.only(left: 50)),
                  Text(
                    state.model.phone,
                    style: TextThemeConfig.Font14WithColor22,
                  ),
                  Padding(padding: EdgeInsets.only(left: 9)),
                  InkWell(
                    child: Image.asset('images/phone.png'),
                    onTap: () => CommonUtils.callPhone(
                        state.model.phone, viewService.context),
                  )
                ],
              ),
            ),
            // Container(
            //   padding: EdgeInsets.symmetric(vertical: 5),
            //   child: Row(
            //     children: [
            //       Text(
            //         '客户类型',
            //         style: TextThemeConfig.Font14WithColor66,
            //       ),
            //       Padding(padding: EdgeInsets.only(left: 50)),
            //       Text(
            //         state.model.type,
            //         style: TextThemeConfig.Font14WithColor22,
            //       ),
            //     ],
            //   ),
            // ),
            // Container(
            //   padding: EdgeInsets.symmetric(vertical: 5),
            //   child: Row(
            //     children: [
            //       Text(
            //         '用气状态',
            //         style: TextThemeConfig.Font14WithColor66,
            //       ),
            //       Padding(padding: EdgeInsets.only(left: 50)),
            //       Text(
            //         state.model.userStatus,
            //         style: TextThemeConfig.Font14WithColor22,
            //       ),
            //     ],
            //   ),
            // ),
          ],
        ),
      );

  Widget _reasonWidget() => Container(
        color: Colors.white,
        padding: EdgeInsets.only(bottom: 15),
        child: Column(
          children: [
            Container(
              height: 45,
              decoration: BoxDecoration(
                border:
                    Border(bottom: BorderSide(color: ThemeConfig.separeColor)),
              ),
              child: Row(
                children: [
                  Expanded(
                    child: InkWell(
                      child: Align(
                        child: Text(
                          '到访不遇',
                          style: state.selectIndex == 0
                              ? TextThemeConfig.Font15WithMainColor
                              : TextThemeConfig.Font15WithColor99,
                        ),
                      ),
                      onTap: () =>
                          dispatch(RefuseIndoorActionCreator.onSetIndex(0)),
                    ),
                  ),
                  Expanded(
                    child: InkWell(
                      child: Align(
                        child: Text(
                          '拒绝安检',
                          style: state.selectIndex == 1
                              ? TextThemeConfig.Font15WithMainColor
                              : TextThemeConfig.Font15WithColor99,
                        ),
                      ),
                      onTap: () =>
                          dispatch(RefuseIndoorActionCreator.onSetIndex(1)),
                    ),
                  ),
                ],
              ),
            ),
            Container(
              height: 100,
              child: Stack(
                children: [
                  Offstage(
                    child: Container(
                      padding: EdgeInsets.only(left: 15, top: 20),
                      height: 100,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          InkWell(
                            child: Container(
                              child: Row(
                                children: [
                                  Image.asset(state.selectReason == 0
                                      ? 'images/icon_select.png'
                                      : 'images/icon_normal.png'),
                                  Padding(padding: EdgeInsets.only(left: 15)),
                                  Text(
                                    '安检人员多次上门，家中无人。',
                                    style: TextThemeConfig.Font14WithColor22,
                                  ),
                                ],
                              ),
                            ),
                            onTap: () => dispatch(
                                RefuseIndoorActionCreator.onSetSelectReason(0)),
                          ),
                          Padding(padding: EdgeInsets.only(top: 20)),
                          InkWell(
                            child: Container(
                              child: Row(
                                children: [
                                  Image.asset(state.selectReason == 1
                                      ? 'images/icon_select.png'
                                      : 'images/icon_normal.png'),
                                  Padding(padding: EdgeInsets.only(left: 15)),
                                  Text(
                                    '用户电话接通，另约上门安检时间。',
                                    style: TextThemeConfig.Font14WithColor22,
                                  ),
                                ],
                              ),
                            ),
                            onTap: () => dispatch(
                                RefuseIndoorActionCreator.onSetSelectReason(1)),
                          ),
                        ],
                      ),
                    ),
                    offstage: state.selectIndex != 0,
                  ),
                  Offstage(
                    child: Container(
                      padding: EdgeInsets.only(left: 15, right: 15, bottom: 8),
                      height: 100,
                      child: TextField(
                        minLines: 1,
                        maxLines: 10,
                        controller: state.textEditingController,
                        style: TextThemeConfig.Font13WithColor22,
                        decoration: InputDecoration(
                          border: InputBorder.none,
                          hintText: "请在此处描述问题...",
                          hintStyle: TextThemeConfig.Font13WithColor99,
                          contentPadding: EdgeInsets.only(),
                        ),
                        onChanged: (String str) {
                          if (str.length > ThemeConfig.descTextLength)
                            state.textEditingController.text =
                                str.substring(0, ThemeConfig.descTextLength);
                        },
                      ),
                    ),
                    offstage: state.selectIndex != 1,
                  )
                ],
              ),
            ),
            Container(
              padding: EdgeInsets.only(left: 15),
              height: kOrderImageWidth,
              child: ListView.builder(
                itemBuilder: (BuildContext context, int index) {
                  if (index == state.orderPhoto.length) {
                    return InkWell(
                      child: Container(
                        margin: EdgeInsets.only(right: 12),
                        width: kOrderImageWidth,
                        height: kOrderImageWidth,
                        color: Color(0xffF5F5F5),
                        child: Align(
                          child: Image.asset('images/icon_camera.png'),
                        ),
                      ),
                      onTap: () =>
                          dispatch(RefuseIndoorActionCreator.onTapAddPic()),
                    );
                  } else {
                    var file = state.orderPhoto[index];
                    return InkWell(
                      child: Container(
                        margin: EdgeInsets.only(right: 12),
                        child: file is File
                            ? Image(
                          image: FileImageEx(file),
                          width: kOrderImageWidth,
                          height: kOrderImageWidth,
                          fit: BoxFit.fill,
                        )
                            : CustomImage(
                          file,
                          fit: BoxFit.fill,
                          width: kOrderImageWidth,
                          height: kOrderImageWidth,
                        ),
                      ),
                      onTap: () =>
                          dispatch(RefuseIndoorActionCreator.onTapPic(file)),
                    );
                  }
                },
                itemCount: state.orderPhoto.length + 1,
                scrollDirection: Axis.horizontal,
                itemExtent: kOrderImageWidth + 12,
                padding: EdgeInsets.only(),
              ),
            )
          ],
        ),
      );

  return Scaffold(
    appBar: myAppBar(viewService.context, title: '无法入户'),
    body: GestureDetector(
      onTap: () => CommonUtils.closeKey(viewService.context),
      behavior: HitTestBehavior.translucent,
      child: SingleChildScrollView(
        child: Column(
          children: [
            _infoWidget(),
            _reasonWidget(),
            Container(
              margin: EdgeInsets.symmetric(horizontal: 15, vertical: 40),
              height: 50,
              decoration: BoxDecoration(
                color: ThemeConfig.mainColor,
                borderRadius: BorderRadius.all(Radius.circular(4)),
              ),
              child: InkWell(
                child: Align(
                  child: Text(
                    '提交原因',
                    style: TextThemeConfig.Font16WithWhite,
                  ),
                ),
                onTap: () => dispatch(RefuseIndoorActionCreator.onSubmit()),
              ),
            ),
          ],
        ),
      ),
    ),
  );
}
